<template>
    <div>
        <Header></Header>
        <div class="studentMain" :style="{'background':(styles ? styles : '#1876d2')}">
            <styleModal @styleids="changeStyleFn" v-if="isChStShow"></styleModal>
            <div class="headerBox">
                <div class="headerCenter">
                    <h3>
                        {{otherUserInfo.username || otherUserInfo.userName}}
                        <label>
                            {{otherUserInfo.rolename ||
                            (otherUserInfo.roleid == 6 ?'学生': otherUserInfo.roleid == 8 ?'老师':
                            otherUserInfo.role_id == 6 ?'学生': otherUserInfo.role_id == 8 ?'老师':'家长')}}</label>
                    </h3>
                    <span>{{loadBindInfoP.signature ? loadBindInfoP.signature : ''}}</span>
                </div>
            </div>
            <studentOtherNav></studentOtherNav>

            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>

</template>

<script>
    import {
        mapState
    } from "vuex";
    import styleModal from "@c/Style/changeStyle.vue"
    import studentOtherNav from "@c/navigation/studentOtherNav.vue"
    import Header from "@c/Header/head";
    export default {
        components: {
            styleModal,
            studentOtherNav,
            Header,
        },
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                otherUserInfo: state => state.userModule.otherUserInfo
            })
        },
        created() {
            console.log(this.otherUserInfo)
            this.getList()
        },
        mounted() {},
        data() {
            return {
                loadBindInfoP: {},
                isChStShow: false, //是否显示空间装扮控制
                activeIndex: '1',
                styles: '#f1f1f1'
            }
        },
        methods: {
            getList(){
                this.$store.dispatch('homeModule/loadBindInfo',{
                    hisUserId: this.otherUserInfo.userid || this.otherUserInfo.id
                }).then(res => {
                    if(res){
                        this.loadBindInfoP = res
                    }
                })
            },
            handleSelect(key, keyPath) {
            },
            changeStyleFn(payload) {
                this.styles = payload;
            },

        },

    }
</script>

<style lang="scss" scoped>
    .studentMain {
        overflow: hidden;

        .headerBox {
            width: 100%;
            height: 350px;
            overflow: hidden;
            background: url("../../../assets/img/studentsBgh.jpg") top no-repeat;
            background-size: 100%;

            .headerCenter {
                width: 81%;
                margin: auto;
                height: 350px;
                position: relative;

                span {
                    position: absolute;
                    top: 55%;
                    left: 0;
                    color: #fff;
                }

                h3 {
                    position: absolute;
                    color: #fff;
                    top: 30%;
                    left: 0;
                    font-weight: bold;
                    font-size: 32px;

                    label {
                        background: #409EFF;
                        color: #fff;
                        font-size: 14px;
                        padding: 5px;
                        border-radius: 5px;
                        margin-left: 30px;
                    }
                }
            }

        }

        .content {
            width: 81%;
            margin: 30px auto;
            overflow: hidden;
        }
    }
</style>